<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <%- include('./common/header.html') %>
  <link rel="stylesheet" href="/lib/quill-2.0.3/quill.snow.css">
  <link rel="stylesheet" href="/assets/css/detail.css">
  <script src="/assets/js/detail.js"></script>
  <title>博客详情页</title>
</head>

<body>
<%- include('./common/nav.html') %>

<div class="container p-3">
  <h1 class="text-center m-4"><%= blog.title %></h1>

  <div class="d-flex justify-content-between align-items-center" style="font-size: 13px; color: #555;">
    <span><%= blog.author.username %> 最后更新于 <%= blog.formattedLastUpdateAt %></span>

    <!-- 操作按钮 -->
    <div>
      <button class="btn btn-warning btn-sm me-2" id="btnGoBack">后 退</button>
      <% if (blog.author._id.toString() === user?._id) { %>
      <a class="btn btn-primary btn-sm me-2" href="/edit/<%= blog._id %>">修 改</a>
      <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal">删 除</button>
      <% } %>
    </div>
  </div>
  <!-- 分割线 -->
  <hr class="mt-2">

  <!-- 博客详情 -->
  <div class="ql-editor" style="line-height: 30px; margin: -50px 0; padding: 0;">
    <%- blog.content %>
  </div>

  <!-- 分割线 -->
  <hr class="mb-3">

  <!-- 评论文本框区域 -->
  <div class="comment">
    <textarea class="form-control" <%= isSignIn ? '' : 'disabled' %> id="comment-input" rows="3"
    placeholder="请输入评论内容"></textarea>
    <button class="btn btn-primary col-12 mt-3 <%= isSignIn ? '' : 'disabled' %>" id="comment-btn"
            data-blog-id="<%= blog._id %>">登录后发表评论
    </button>
  </div>

  <!-- 评论列表区域 -->
  <div class="cmt-list">
    <% blog.comments.forEach(cmt => { %>
    <div class="cmt-item d-flex flex-column pt-4 pb-4">
      <span class="username pb-2"><%= cmt.user.username %></span>
      <span class="time pb-2"><%= cmt.formattedTime %></span>
      <span class="cmt-content"><%= cmt.comment %></span>
    </div>
    <% }) %>
  </div>

</div>

<!-- 客户端的 EJS 模板，用于渲染新发表的评论内容 -->
<script type="text/template" id="tmpl">
  <div class="cmt-item d-flex flex-column pt-4 pb-4">
    <span class="username pb-2"><$= cmt.user.username $></span>
    <span class="time pb-2"><$= cmt.formattedTime $></span>
    <span class="cmt-content"><$= cmt.comment $></span>
  </div>
</script>

<!-- 删除前的提示 Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5">温馨提示</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        博客将被永久删除，您确定要继续删除吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="btnDelete" data-id="<%= blog._id %>">删除</button>
      </div>
    </div>
  </div>
</div>

</body>

</html>